<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="app">
        <!-- <input type="button" value="GetList" @click="getStudentList"></input> -->
        <table id="studentTable">
            <tr>
                <td colspan="12">学生信息展示&nbsp&nbsp<a href="#" @click="showAddStudent">添加数据</a></td>
            </tr>
            <tr>
                <td>地址</td>
                <td>出生日期</td>
                <td>电子邮箱</td>
                <td>年级</td>
                <td>身份证号</td>
                <td>登录密码</td>
                <td>电话号码</td>
                <td>性别</td>
                <td>学生姓名</td>
                <td>学号</td>
                <td colspan="2">操作</td>
            </tr>
            <tr v-for="stu in studentList">
                <td>{{stu.address}}</td>
                <td>{{stu.bornDate}}</td>
                <td>{{stu.email}}</td>
                <td>{{gradeOptions[stu.gradeId]}}</td>
                <td>{{stu.identityCard | filterIDnumber("********")}}</td>
                <td>{{stu.loginPwd}}</td>
                <td>{{stu.phone}}</td>
                <td>{{sexOptions[stu.sex]}}</td>
                <!-- <td>{{stu.studentName.split('').reverse().join('')}}</td>   js字符串反转 -->
                <td>{{stu.studentName}}</td>
                <td>{{stu.studentNo}}</td>
                <td><a href="#" @click="showEditStudent(stu)">修改</a></td>
                <td><a href="#" @click="deleteStudent(stu.studentNo)">删除</a></td>
            </tr>
        </table>
        <table id="addStudentTable" v-if="showAddStudentTable">
            <tr>
                <td colspan="6">添加学生</td>
            </tr>
            <tr>
                <td>地址</td>
                <td>出生日期</td>
                <td>电子邮箱</td>
                <td>年级</td>
                <td>身份证号</td>
                <td>登录密码</td>
            </tr>
            <tr>
                <td><input v-model="student.address"></td>
                <td><input v-model="student.bornDate"></td>
                <td><input v-model="student.email"></td>
                <td>
                    <select v-model="student.gradeId">
                        <option v-for="value,key in this.gradeOptions" :value="key">
                            {{ gradeOptions[key] }}
                        </option>
                    </select>
                </td>
                <td><input v-model="student.identityCard"></td>
                <td><input v-model="student.loginPwd"></td>
            </tr>
            <tr>
                <td>电话号码</td>
                <td>性别</td>
                <td>学生姓名</td>
                <td colspan="3">操作</td>
            </tr>
            <tr>
                <td><input v-model="student.phone"></td>
                <td>
                    <select v-model="student.sex">
                        <option v-for="value,key in this.sexOptions" :value="key">
                            {{ sexOptions[key] }}
                        </option>
                    </select>
                </td>
                <td><input v-model="student.studentName"></td>
                <td><a href="#" @click="addStudent">提交</a></td>
                <td colspan="2"><a href="#" @click="showAddStudentTable=false">关闭</a></td>
            </tr>
        </table>
        <table id="editStudentTable" v-if="showEditStudentTable">
            <tr>
                <td colspan="6">修改学生 学号: {{student.studentNo}}</td>
            </tr>
            <tr>
                <td>地址</td>
                <td>出生日期</td>
                <td>电子邮箱</td>
                <td>年级</td>
                <td>身份证号</td>
                <td>登录密码</td>
            </tr>
            <tr>
                <td><input v-model="student.address"></td>
                <td><input v-model="student.bornDate"></td>
                <td><input v-model="student.email"></td>
                <td>
                    <select v-model="student.gradeId">
                        <option v-for="value,key in this.gradeOptions" :value="key">
                            {{ gradeOptions[key] }}
                        </option>
                    </select>
                </td>
                <td><input v-model="student.identityCard"></td>
                <td><input v-model="student.loginPwd"></td>
            </tr>
            <tr>
                <td>电话号码</td>
                <td>性别</td>
                <td>学生姓名</td>
                <td colspan="3">操作</td>
            </tr>
            <tr>
                <td><input v-model="student.phone"></td>
                <td>
                    <select v-model="student.sex">
                        <option v-for="value,key in this.sexOptions" :value="key">
                            {{ sexOptions[key] }}
                        </option>
                    </select>
                </td>
                <td><input v-model="student.studentName"></td>
                <td><a href="#" @click="updateStudent">提交修改</a></td>
                <td colspan="2"><a href="#" @click="showEditStudentTable=false">关闭修改</a></td>
            </tr>
        </table>

    </div>



    <script src="js/vue.2.1.3.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                showAddStudentTable: false,
                showEditStudentTable: false,
                studentList: [],
                student: {},
                gradeOptions: { 1: '大一', 2: '大二', 3: '大三', 4: '大四' },
                sexOptions: { 1: '男', 2: '女' }
            },
            // 已挂在 (生命周期用的是比较多)(虚拟DOM已经渲染成真实DOM,DOM操作生效)
            // 1、发起后端请求，拿回数据 2、接收页面之间的传递的参数 3、子组件向父组件传递参数
            mounted: function () {
                this.getStudentList();
                // 手动调用的axios请求在发送之前可以被拦截器拦截
                axios.interceptors.request.use(function (config) {
                    // 请求之前可以处理一些操作
                    console.log("请求之前可以处理一些操作");
                    return config;
                }, function (error) {
                    // 请求错误之前可以处理的操作
                    return Promise.reject(error);
                });
                axios.interceptors.response.use(function (response) {
                    //返回响应数据做一些操作
                    console.log("返回响应数据做一些操作")
                    return response;
                }, function (error) {
                    //响应错误的时候做一些操作
                    return Promise.reject(error);
                });
            },
            // 生命周期的写法需要注意，适合data在一个级别的
            // 创建前
            //在这个时期 ,说明 el(View-网页标签) 和 data(Model-声明变量) 和 methods 方法  都未初始化
            beforeCreate: function () {
                console.group('------beforeCreate创建前状态------');
                console.log("el: " + this.$el); //undefined
                console.log("data: " + this.$data); //undefined 
                console.log("student: " + this.student) //undefined 
            },
            // 已创建
            // 在这个时期, data 和 methods 方法 数据已经初始化，但是 el 没有
            created: function () {
                console.group('------created创建完毕状态------');
                console.log("el: " + this.$el); //undefined
                console.log("data: " + this.$data); //已被初始化 
                console.log("student: " + this.student); //Vue的生命周期,说明已被初始化
            },
            // 挂载前(生成了虚拟DOM-EL,DOM操作不起作用)
            // 这个时期,data 和 el 和 methods 方法 都已经 初始化
            beforeMount: function () {
                console.group('------beforeMount挂载前状态------');
                console.log("el: " + (this.$el)); //已被初始化
                console.log(this.$el);
                console.log("data: " + this.$data); //已被初始化  
                console.log("student: " + this.student); //已被初始化  
            },
            // 更新前（此阶段，数据已经是新的，但是页面未跟新完）
            // Vue发现data发生了改变，就会触发
            beforeUpdate: function () {
                console.group('------beforeUpdate 更新前状态------');
                console.log("el: " + this.$el);
                console.log(this.$el);
                console.log("data   : " + this.$data);
                console.log("student: " + this.student);
            },
            // 已更新（页面数据已经更新完）
            updated: function () {
                console.group('------updated 更新后状态------');
                console.log("el: " + this.$el);
                console.log(this.$el);
                console.log("data: " + this.$data);
                console.log("student: " + this.student);
                // 当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。我们在console中输入 vm.message = '触发组件更新'
                // 这里就比较好理解了：当希望更新组件前做一些操作的时候，我们就可以调用 beforeUpdate钩子函数，同理使用 updated 钩子函数
            },
            // 销毁前
            // 在实例销毁之前调用。在这一步，实例仍然完全可用。
            beforeDestroy: function () {
                console.group('------beforeDestroy 销毁前状态------');
                console.log("el: " + this.$el);
                console.log(this.$el);
                console.log("data: " + this.$data);
                console.log("student: " + this.student);
            },
            // 已销毁
            // Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
            destroyed: function () {
                console.group('------destroyed 销毁后状态------');
                console.log("el: " + this.$el);
                console.log(this.$el);
                console.log("data: " + this.$data);
                console.log("student: " + this.student);
            },
            watch: {},
            methods: {
                getStudentList: function () {
                    axios.get("http://localhost:8080/webProject_war_exploded/userList")
                        .then(res => {
                            console.log(res.data);
                            this.studentList = res.data
                        }).catch(err => {
                            console.log(err);
                        })
                },
                deleteStudent: function (studentNo) {
                    let params = new URLSearchParams();
                    params.append("studentNo", studentNo)
                    axios.post("http://localhost:8080/webProject_war_exploded/userDel", params)
                        .then(res => {
                            console.log(res.data);
                            alert(res.data);
                            this.getStudentList();
                        }).catch(err => {
                            console.log(err);
                        })
                },
                addStudent: function () {
                    console.log(this.student);
                    let params = new URLSearchParams();
                    params.append("address", this.student.address)
                    params.append("bornDate", this.student.bornDate)
                    params.append("email", this.student.email)
                    params.append("gradeId", this.student.gradeId)
                    params.append("identityCard", this.student.identityCard)
                    params.append("loginPwd", this.student.loginPwd)
                    params.append("phone", this.student.phone)
                    params.append("sex", this.student.sex)
                    params.append("studentName", this.student.studentName)
                    axios.post("http://localhost:8080/webProject_war_exploded/userAdd", params,
                        {
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                            }
                        })
                        .then(res => {
                            console.log(res.data);
                            alert(res.data);
                            this.getStudentList();
                        }).catch(err => {
                            console.log(err);
                        }).then(
                            this.showAddStudentTable = false)
                },
                updateStudent: function () {
                    console.log(this.student);
                    let params = new URLSearchParams();
                    params.append("address", this.student.address)
                    params.append("bornDate", this.student.bornDate)
                    params.append("email", this.student.email)
                    params.append("gradeId", this.student.gradeId)
                    params.append("identityCard", this.student.identityCard)
                    params.append("loginPwd", this.student.loginPwd)
                    params.append("phone", this.student.phone)
                    params.append("sex", this.student.sex)
                    params.append("studentName", this.student.studentName)
                    params.append("studentNo", this.student.studentNo)
                    axios.post("http://localhost:8080/webProject_war_exploded/userUpdate", params,
                        {
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                            }
                        })
                        .then(res => {
                            console.log(res.data);
                            alert(res.data);
                            this.getStudentList();
                        }).catch(err => {
                            console.log(err);
                        }).then(
                            this.showEditStudentTable = false)
                },
                showEditStudent: function (stu) {
                    let params = new URLSearchParams();
                    params.append("studentNo", stu.studentNo)
                    axios.post("http://localhost:8080/webProject_war_exploded/userList", params,
                        {
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                            }
                        })
                        .then(res => {
                            console.log(res.data);
                            this.student = res.data[0]
                        }).catch(err => {
                            console.log(err);
                        }).then(
                            this.showEditStudentTable = true,
                            this.showAddStudentTable = false
                        );
                },
                showAddStudent: function (stu) {
                    this.showAddStudentTable = true;
                    this.showEditStudentTable = false;
                    this.student = {};
                },
            },
            filters: {
                filterIDnumber: function (idNumber, arg) {
                    return idNumber.toString().substr(0,4)+arg+idNumber.toString().substr(13,4)
                }
            }
        })
    </script>
</body>

</html>